<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '搜索',
  },
}
</route>

<template>
  <view class="search-page">
    <!-- 搜索栏 -->
    <wd-sticky>
      <view class="search-bar">
        <wd-search
          v-model="searchText"
          placeholder="请输入商品名称"
          shape="round"
          @search="handleSearch"
        />
      </view>
    </wd-sticky>
    <!-- 排序栏 -->
    <wd-sticky>
      <view class="sort-bar">
        <!-- <wd-button
          v-for="sort in sortOptions"
          :key="sort.value"
          size="small"
          :plain="searchParams.strategy !== sort.value"
          @click="changeSort(sort.value)"
        >
          {{ sort.label }}
        </wd-button> -->
        <view @click="closeOutside">
          <wd-drop-menu>
            <wd-drop-menu-item
              v-model="searchParams.strategy"
              :options="option1"
              @change="changeSort"
            />
            <!-- <wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" /> -->
          </wd-drop-menu>
        </view>
      </view>
    </wd-sticky>
    <!-- 商品列表 -->
    <scroll-view scroll-y class="product-box">
      <view class="product-list">
        <view class="product-item" v-for="item in goodsList" :key="item.id">
          <product-card layout-model="" :product="item" />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'
import { pageList } from '@/service/goods'
import type { GoodsSku, GoodsSkuQuery, SortStrategyEnum } from '@/service/goods/goods.d'
import { useQueue } from 'wot-design-uni'

const { closeOutside } = useQueue()
const ProductCard = defineAsyncComponent(() => import('@/components/product/product-card.vue'))
// 商品列表数据
const goodsList = ref<GoodsSku[]>([])
// 搜索参数
const searchParams = ref<GoodsSkuQuery>({
  current: 1,
  size: 10,
  strategy: 'RANDOM' as SortStrategyEnum,
})
// 搜索文本
const searchText = ref('')
// 加载状态
const loading = ref(false)
// 是否还有更多
const noMore = ref(false)

// 排序选项配置

const option1 = ref<Record<string, any>[]>([
  { label: '综合', value: 'RANDOM' as SortStrategyEnum },
  // { label: '价格升序', value: 'PRICE_ASC' as SortStrategyEnum },
  // { label: '价格降序', value: 'PRICE_DESC' as SortStrategyEnum },
  // { label: '销量优先', value: 'SALES_DESC' as SortStrategyEnum },
])
// 加载数据
const loadData = async (reset = false) => {
  if (noMore.value || loading.value) return

  try {
    loading.value = true
    // const { records, current, pages } = await pageList({
    const { data } = await pageList({
      ...searchParams.value,
      name: searchText.value,
    })

    goodsList.value = reset ? data.records : [...goodsList.value, ...data.records]
    console.log(goodsList.value)

    noMore.value = data.current >= data.total
    searchParams.value.current = data.current + 1
  } finally {
    loading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  searchParams.value.current = 1
  noMore.value = false
  loadData(true)
}

// 改变排序
const changeSort = ({ value }) => {
  searchParams.value.strategy = value

  searchParams.value.name != null && searchParams.value.name !== '' && handleSearch()
}

// 加载更多
const loadMore = () => {
  if (!noMore.value) {
    loadData()
  }
}
</script>

<style lang="scss" scoped>
.search-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.search-bar {
  box-sizing: border-box;
  width: 750rpx;
  padding: 0 30rpx;
  background: #fff;
}

.sort-bar {
  box-sizing: border-box;
  display: flex;
  width: 750rpx;
  height: auto;
  background: #fff;
  .wd-button {
    flex: 1;
  }
}
.product-box {
  margin-top: 10rpx;
}
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 15rpx;
  .product-item {
    box-sizing: border-box;
  }
}
</style>
